<template>
  <div class="">
    <h2>全部组件</h2>
    全选：<input type="checkbox" v-model="checked" @change="checkall" />
    <van-button type="danger" @click="removeall">删除选中</van-button>
    <van-card
      v-for="item in $store.state.goods"
      :key="item.id"
      :price="item.price"
      :desc="item.subscribe"
      :title="item.name"
      thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
    >
      <template #footer>
        <input
          type="checkbox"
          v-model="result"
          :value="item"
          @change="change"
        />
      </template>
    </van-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked: false,
      result: [],
    };
  },
  mounted() {},
  methods: {
    change() {
      if (this.result.length == this.$store.state.goods.length) {
        this.checked = true;
      } else {
        this.checked = false;
      }
    },
    //点击商品的复选框 控制全选按钮
    checkall() {
      if (this.checked == true) {
        this.result = this.$store.state.goods;
      } else {
        this.result = [];
      }
    },
    //全选按钮 控制商品是否选中
    removeall() {
      this.$store.commit("removeall", this.result);
    },
  },
  components: {},
};
</script>

<style lang="scss"></style>
